import { defineComponent } from 'vue';
import Accordion from './Accordion.vue';
import Basic from './Basic.vue';
import ControlExpansionState from './ControlExpansionState.vue';
import Dark from './Dark.vue';
import Demo from './Demo.vue';
import Dense from './Dense.vue';
import HandlingEvents from './HandlingEvents.vue';
import HeaderSlot from './HeaderSlot.vue';
import IconToggle from './IconToggle.vue';
import InsetLevels from './InsetLevels.vue';
import Popup from './Popup.vue';
import SwitchToggleSide from './SwitchToggleSide.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>Accordion</h5>
            <Accordion />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>ControlExpansionState</h5>
            <ControlExpansionState />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>Dense</h5>
            <Dense />
          </div>
          <div class='block-'>
            <h5 class='title'>HandlingEvents</h5>
            <HandlingEvents />
          </div>
          <div class='block-'>
            <h5 class='title'>HeaderSlot</h5>
            <HeaderSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>IconToggle</h5>
            <IconToggle />
          </div>
          <div class='block-'>
            <h5 class='title'>InsetLevels</h5>
            <InsetLevels />
          </div>
          <div class='block-'>
            <h5 class='title'>Popup</h5>
            <Popup />
          </div>
          <div class='block-'>
            <h5 class='title'>SwitchToggleSide</h5>
            <SwitchToggleSide />
          </div>
        </div>
      );
    };
  },
});
